:host{
  display: inline-flex;
  font-size: 24px;
  color: var(--primary-color, royalblue)
}
:host([disabled]){
  opacity: .6;
}
fieldset{
  display: contents;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E %3Cpath d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z'%3E%3C/path%3E %3C/svg%3E")
}
[type="radio"] {
  appearance: none;
  width: 1em;
  height: 1em;
  border-radius: var(--border-radius-base, 4px);
  margin: 0;
  color: inherit;
  font-size: inherit;
  background: var(--primary-bg-dark, rgba(0,0,0,0.25));
  transition: var(--transition, .2s);
  -webkit-mask: var(--icon) center / 80% no-repeat;
}
[type="radio"]:not(:disabled){
  cursor: pointer;
}
[type="radio"]:not(:disabled):hover{
  transform: scale(1.2);
}

[type="radio"]:not(:disabled):is(:hover, :has(~ :hover)),
:host(:is(:not(:hover),[disabled])) [type="radio"]:is(:checked, :has(~ :checked)){
  background: currentColor;
}
